/* eslint-disable react/jsx-no-comment-textnodes */
import React, { useState, useCallback, useEffect } from "react";
import './App.css'

import Header from './component/Header'
import AddInput from './component/AddInput'
import TodoItem from "./component/todoItem";
import CheckModal from './component/Modal/checkModal'
import EditModal from "./component/Modal/editModal";
import NoDataTip from './component/NoDataTip';

function App() {

    // state管理
    const[isShowInput, setIsShowInput] = useState(false),
        [todoList, setTodoList] = useState([]),
        [isShowCheckModal, setIsShowCheckModal] = useState(false),
        [isShowEditModal, setIsShowEditModal] = useState(false),
        [currentData, setCurrentData] = useState({});

    // 存入数据到localStorage
    useEffect(() => {
        const todoData = JSON.parse(localStorage.getItem("todoData") || '[]');
        setTodoList(todoData);
    }, []);
    // 取出数据
    useEffect(() => {
        localStorage.setItem("todoData", JSON.stringify(todoList));
    }, [todoList]);

    // 增
    const addItem = useCallback((value) => {
            const dataItem = {
                id: new Date().getTime(),
                content: value,
                completed: false,
            };
            setTodoList((todoList) => [...todoList, dataItem]);
            setIsShowInput(false);
        },[]);

    // 删
    const removeItem = useCallback((id) => {
        setTodoList((todoList) => todoList.filter((item) => item.id !== id));
    }, []);

    // 打开 改 
    const openEditModal = useCallback(
        (id) => {
            setCurrentData(() => todoList.filter((item) => item.id === id)[0]);
            setIsShowEditModal(true);
        },[todoList]);

    // 提交 改
    const submitEdit = useCallback((newData, id) => {
        setTodoList((todoList) => {
            todoList.map((item) => {
                if (item.id === id) {
                    item = newData;
                }
                return item;
            })
        });
        setIsShowEditModal(false);
    }, []);

    // 查
    // 要缓存从子组件过来的属性，让子组件不要重复渲染
    const openCheckModal = useCallback(
        (id) => {
            // 要缓存从子组件过来的属性，让子组件不要重复渲染
            setCurrentData(() => todoList.filter((item) => item.id === id)[0]);
            setIsShowCheckModal(true);
        },[todoList]);

    // 完成状态变更
    const completedItem = useCallback((id) => {
        setTodoList((todoList) => todoList.map((item) => {
            if (item.id === id) {
                item.completed = !item.completed;
            }
            return item;
        }));
    }, [])
    return (
        <div className="App">
            <Header openInput={() => setIsShowInput(!isShowInput)} />
            // 增
            <AddInput isShow={isShowInput} addItem={(value) => addItem(value)} />
            // 查
            <CheckModal
                isShowCheckModal={isShowCheckModal}
                data={currentData}
                closeModal={() => setIsShowCheckModal(false)}
            />
            // 改
            <EditModal
                isShowEditModal={isShowEditModal}
                data={currentData}
                submitEdit={submitEdit}
            />
            // 渲染item
            {!todoList || todoList.length === 0 ? 
            (
                <NoDataTip />
            ) 
            : (
                <ul className="todo-list">
                    {todoList.map((item, index) => {
                        return (
                            <TodoItem
                                key={index}
                                data={item}
                                openCheckModal={openCheckModal}
                                openEditModal={openEditModal}
                                completedItem={completedItem}
                                removeItem={removeItem}
                            />
                        );
                    })}
                </ul>
            )}
        </div>
    );
}

export default App;
